<template>
  <div class="index">
    <van-tabbar v-model="obj.active" active-color="#fff" router>
      <van-tabbar-item
        to="/"
        @click="hh"
        :class="obj.active == 0 ? 'yy' : ''"
        icon="../public/下载.png"
        >{{ obj.active == 0 ? "" : "选课" }}</van-tabbar-item
      >
      <van-tabbar-item
        to="/wdk"
        @click="hh"
        :class="obj.active == 1 ? 'yy' : ''"
        icon="../public/wdk.png"
        >{{ obj.active == 1 ? "" : "我的课" }}</van-tabbar-item
      >
      <van-tabbar-item
        to="/mw"
        @click="hh"
        :class="obj.active == 2 ? 'yy' : ''"
        icon="../public/mw.png"
        >{{ obj.active == 2 ? "" : "喵呜" }}</van-tabbar-item
      >
      <van-tabbar-item
        to="/gj"
        @click="hh"
        :class="obj.active == 3 ? 'yy' : ''"
        icon="../public/gj.png"
        >{{ obj.active == 3 ? "" : "工具" }}</van-tabbar-item
      >
      <van-tabbar-item
        to="/wd"
        @click="hh"
        :class="obj.active == 4 ? 'yy' : ''"
        icon="../public/wd.png"
        >{{ obj.active == 4 ? "" : "我的" }}</van-tabbar-item
      >
    </van-tabbar>
  </div>
  <RouterView />
</template>
<script setup>
import { reactive, ref, toRefs, watch, onMounted } from "vue";
let obj = reactive({
  active: localStorage.getItem("acitve") || 0,
});
const hh = () => {
  localStorage.setItem("active", obj.active);
  // console.log(window.location);
};

</script>
<style scoped>
.index {
  width: 100%;
  /* height: 100%; */
}
.yy {
  background: #f15a24 !important;
  height: 90%;
  width: 20% !important;
  border-radius: 45%;
  /* padding: 10px 20px !important; */
  box-sizing: border-box;
  overflow: hidden;
  width: 15%;
  /* padding: 15px; */
}
:deep(.van-tabbar-item) {
  flex: 5% !important;
  width: 15%;
  box-sizing: border-box;
  /* padding: 10px; */
}
van-tabbar-item {
  /* padding: 10px; */
}
</style>
